<script setup lang="ts">
  import { nextTick, PropType, ref } from 'vue'
  import { DataConnectTableFieldType, DataConnectTable } from '../../../hooks/types'
  import { TableInstance } from 'element-plus'
  import _ from 'lodash'

  defineOptions({
    name: 'OrderCustomFormCustomerSelectModal',
  })

  const props = defineProps({
    // 选择时显示的字段
    showFieldList: {
      type: Array as PropType<Array<DataConnectTableFieldType>>,
      default: () => [],
    },

    // 选择方式：1-多选，2-单选
    selectMode: {
      type: Number as PropType<1 | 2>,
      default: () => 1,
    },
  })

  const emits = defineEmits<{
    (e: 'update', value: DataConnectTable): void
  }>()

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 数据
  const list: DataConnectTable = [
    {
      id: '1',
      customerName: '刘在均',
      customerCode: 'USYDX7S8N7WsctpUyR',
      customerPhone: '13874996515',
      customerCreateTime: '2024-12-21 09:11',
      customerUpdateTime: '2024-12-24 11:01',
    },
    {
      id: '2',
      customerName: '奎恩',
      customerCode: 'US00021',
      customerPhone: '15522643552',
      customerCreateTime: '2024-12-19 11:23',
      customerUpdateTime: '2024-12-24 10:57',
    },
    {
      id: '3',
      customerName: '丁元',
      customerCode: 'USQW3Wysum1QaxqyCs',
      customerPhone: '19698989966',
      customerCreateTime: '2024-12-21 09:11',
      customerUpdateTime: '2024-12-23 19:24',
    },
    {
      id: '4',
      customerName: '浙江嗨便利网络科技有限公司',
      customerCode: 'C0008',
      customerPhone: '13888888888',
      customerCreateTime: '2024-12-21 08:59',
      customerUpdateTime: '2024-12-21 08:59',
    },
    {
      id: '5',
      customerName: '东方港',
      customerCode: 'US00023',
      customerPhone: '15555555555',
      customerCreateTime: '2024-12-19 16:13',
      customerUpdateTime: '2024-12-19 16:13',
    },
    {
      id: '6',
      customerName: '江苏金为检验检测有限公司',
      customerCode: 'GNC05971',
      customerPhone: '16232323222',
      customerCreateTime: '2024-12-08 15:50',
      customerUpdateTime: '2024-12-13 00:50',
    },
    {
      id: '7',
      customerName: '刘在均',
      customerCode: 'USYDX7S8N7WsctpUyR',
      customerPhone: '13874996515',
      customerCreateTime: '2024-12-21 09:11',
      customerUpdateTime: '2024-12-24 11:01',
    },
    {
      id: '8',
      customerName: '江西立宏市政工程有限公司',
      customerCode: 'GNC05972',
      customerPhone: '19556565566',
      customerCreateTime: '2024-12-08 15:50',
      customerUpdateTime: '2024-12-13 00:10',
    },
    {
      id: '9',
      customerName: '湖北弘瑞盛环保科技有限公司',
      customerCode: 'GNC05974',
      customerPhone: '19065323232',
      customerCreateTime: '2024-12-08 15:50',
      customerUpdateTime: '2024-12-12 21:16',
    },
    {
      id: '10',
      customerName: '广东江林测绘技术有限公司',
      customerCode: 'GNC06022',
      customerPhone: '18666555555',
      customerCreateTime: '2024-12-08 15:50',
      customerUpdateTime: '2024-12-12 21:16',
    },
  ]

  // 选择的列表
  const selectList = ref<DataConnectTable>([])

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  /**
   * 弹窗隐藏
   */
  const hideDialog = () => {
    visible.value = false
  }

  /**
   * 确定事件
   */
  const onConfirm = () => {
    hideDialog()
    emits('update', _.cloneDeep(selectList.value))
    selectList.value.length = 0
  }

  /**
   * 当选择项发生变化时会触发该事件
   * @param {Array} _list - 选择的列表
   */
  const handleSelectionChange = (_list: DataConnectTable) => {
    selectList.value = _.cloneDeep(_list)
  }

  /**
   * 单选选择事件
   * @param {number} val - 行索引
   */
  const handleRadioChange = (val: number) => {
    if (tableInstance.value) {
      selectList.value = [list[val]]
    }
  }

  defineExpose({
    setSelectedRow: (selectRowIds: Array<string>) => {
      nextTick(() => {
        if (tableInstance.value) {
          tableInstance.value.clearSelection()

          list.forEach((data) => {
            selectRowIds.forEach((selectRowId) => {
              if (selectRowId === data.id) {
                tableInstance.value.toggleRowSelection(data, true)
              }
            })
          })
        }
      })
    },
  })
</script>

<template>
  <h-dialog v-model="visible" title="选择条码" :width="800" @close="hideDialog">
    <el-table
      ref="tableInstance"
      :border="true"
      max-height="450"
      :data="list"
      :stripe="true"
      @selection-change="handleSelectionChange"
    >
      <!--选择（多选）-->
      <el-table-column
        v-if="props.selectMode === 1"
        width="50"
        type="selection"
        :align="'center'"
        fixed="left"
      />

      <!-- 选择（单选） -->
      <el-table-column v-if="props.selectMode === 2" width="50" :align="'center'" fixed="left">
        <template #default="{ row, $index }">
          <el-radio-group :model-value="selectList[0] ? selectList[0].id : ''">
            <el-radio :value="row.id" @change="handleRadioChange($index)"></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>

      <!--序号-->
      <el-table-column label="序号" type="index" width="50" :align="'center'" fixed="left" />

      <!--客户名称-->
      <el-table-column
        v-if="props.showFieldList.includes('customerName')"
        show-overflow-tooltip
        label="客户名称"
        prop="customerName"
        width="140"
      />

      <!--客户编号-->
      <el-table-column
        v-if="props.showFieldList.includes('customerCode')"
        show-overflow-tooltip
        label="客户编号"
        prop="customerCode"
        width="140"
      />

      <!--客户手机号-->
      <el-table-column
        v-if="props.showFieldList.includes('customerPhone')"
        show-overflow-tooltip
        label="客户手机号"
        prop="customerPhone"
        width="140"
      />

      <!--客户创建时间-->
      <el-table-column
        v-if="props.showFieldList.includes('customerCreateTime')"
        show-overflow-tooltip
        label="客户创建时间"
        prop="customerCreateTime"
        width="140"
      />

      <!--客户更新时间-->
      <el-table-column
        v-if="props.showFieldList.includes('customerUpdateTime')"
        show-overflow-tooltip
        label="客户更新时间"
        prop="customerUpdateTime"
        width="140"
      />
    </el-table>
    <template #footer>
      <h-button is-modal type="primary" @click="onConfirm">确定</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-dialog>
</template>

<style scoped lang="scss"></style>
